import { Button, Skeleton, Typography, styled } from '@mui/material'
import { useContext } from 'react'
import { AppContext } from '../store/storeProvider'
import { DEFAULT_ITEMS_PER_PAGE } from '../components/cardlist/pagination'
import { useNavigate } from 'react-router-dom'
import Card from '../components/cardlist/card'
import { ImageType } from '../components/cardlist/image'
import { useGetAllProducts } from '../store/hooks'

const StyledContainer = styled('div')(() => ({
	display: 'flex',
	marginBottom: '10px',
	width: '992px',
	justifyContent: 'flex-start',
	flexDirection: 'column',
}))

const StyledHeader = styled(Typography)(() => ({
	display: 'flex',
	styleName: 'Header : H1/ExtraBold',
	fontFamily: 'Nunito',
	fontSize: '28px',
	fontWeight: '800',
	lineGeight: '32px',
	letterSpacing: '0em',
	textAlign: 'left',
	marginBottom: '20px',
}))

const StyledCardlist = styled('div')(() => ({
	display: 'flex',
	flexDirection: 'row',
	width: '992px',
	height: 'auto',
	marginTop: '20px',
	gap: '15px',
	flexWrap: 'wrap',
}))

const StyledButton = styled(Button)(() => ({
	width: 'fit-content',
	textTransform: 'none',
	color: '#7B8E98',
	fontFamily: 'Nunito',
	fontSize: '14px',
	border: '0',
}))

const Favorites = () => {
	const { state } = useContext(AppContext)
	const navigate = useNavigate()

	const skeletonItems = Array.from(
		{ length: DEFAULT_ITEMS_PER_PAGE },
		(_, i) => i + 1
	)

	useGetAllProducts()

	return (
		<StyledContainer>
			<StyledButton onClick={() => navigate(-1)}>{'< Назад'}</StyledButton>
			<StyledHeader>Избранное</StyledHeader>
			<StyledCardlist>
				{state.pending &&
					skeletonItems.map((item) => (
						<Skeleton key={item} variant='rounded' width={236} height={359} />
					))}
				{state.allData
					?.filter((item) => item.likes.includes(state.user._id))
					.map(({ _id, pictures, discount, price, wight, name, likes }) => (
						<Card
							key={_id}
							_id={_id}
							pictures={pictures}
							discount={discount}
							discountPrice={price * (1 - discount / 100)}
							price={price}
							wight={wight}
							name={name}
							likes={likes}
							type={ImageType.favorites}
						/>
					))}
			</StyledCardlist>
		</StyledContainer>
	)
}

export default Favorites
